'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _getWindowWidth = require('tf-utils/dom/getWindowWidth');

var _getWindowWidth2 = _interopRequireDefault(_getWindowWidth);

var _getWindowHeight = require('tf-utils/dom/getWindowHeight');

var _getWindowHeight2 = _interopRequireDefault(_getWindowHeight);

var _getImgResponsivePos = require('tf-utils/dom/getImgResponsivePos');

var _getImgResponsivePos2 = _interopRequireDefault(_getImgResponsivePos);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

//初始化的边距，主要配合getImgZoomSmall使用，即图片的默认展示位置需要跟四周留有空间
var initPaddingH = 100;
var initPaddingV = 100;
//每次缩放30px
var step = 30;

var ImageViewer = function (_React$Component) {
    _inherits(ImageViewer, _React$Component);

    function ImageViewer(props) {
        _classCallCheck(this, ImageViewer);

        //绑定事件作用域
        var _this = _possibleConstructorReturn(this, (ImageViewer.__proto__ || Object.getPrototypeOf(ImageViewer)).call(this, props));

        _this.imgLeft = 0;
        _this.imgTop = 0;
        _this.imgWidth = 0;
        _this.imgHeight = 0;
        _this.winWidth = 0;
        _this.winHeight = 0;
        _this.imgWrap = null;
        _this.imgPreview = null;
        _this.mouseWheel = _this.mouseWheel.bind(_this);
        _this.mouseDown = _this.mouseDown.bind(_this);
        _this.mouseMove = _this.mouseMove.bind(_this);
        _this.mouseUp = _this.mouseUp.bind(_this);
        _this.close = _this.close.bind(_this);
        return _this;
    }

    /**
     * 设置图片的初始坐标相关参数
     * @param imgWidth
     * @param imgHeight
     */


    //元素引用

    //坐标变量


    _createClass(ImageViewer, [{
        key: 'setInitImgPosition',
        value: function setInitImgPosition(imgWidth, imgHeight) {
            //获取当前窗体高宽
            this.winWidth = (0, _getWindowWidth2.default)();
            this.winHeight = (0, _getWindowHeight2.default)();
            var pos = (0, _getImgResponsivePos2.default)(this.winWidth - 2 * initPaddingH, this.winHeight - 2 * initPaddingV, imgWidth, imgHeight);
            this.imgLeft = initPaddingH + pos.left;
            this.imgTop = initPaddingV + pos.top;
            this.imgWidth = pos.width;
            this.imgHeight = pos.height;
        }
    }, {
        key: 'open',
        value: function open() {
            var _this2 = this;

            //隐藏网页滚动条
            document.body.style.overflow = 'hidden';

            //最外层
            var imgPreview = document.createElement('div');
            imgPreview.style.cssText = 'position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.5);overflow:hidden;z-index:9999';

            //包裹图片层
            var imgWrap = document.createElement('div');

            //图片
            var img = document.createElement('img');
            img.src = this.props.src;
            img.draggable = false; //禁止图片默认拖拽行为
            img.style.cssText = 'width:100%;height:100%;';
            img.onload = function () {
                //图片加载完后才能获取到其高度和宽度
                _this2.setInitImgPosition(img.naturalWidth, img.naturalHeight);
                imgWrap.style.left = _this2.imgLeft + 'px';
                imgWrap.style.top = _this2.imgTop + 'px';
                imgWrap.style.width = _this2.imgWidth + 'px';
                imgWrap.style.height = _this2.imgHeight + 'px';
            };
            imgWrap.style.cssText = 'position:absolute;cursor:move';
            imgWrap.addEventListener('mousewheel', this.mouseWheel, false); //FF:DOMMouseWheel
            imgWrap.addEventListener('mousedown', this.mouseDown, false);
            imgWrap.addEventListener('mousemove', this.mouseMove, false);
            imgWrap.addEventListener('mouseup', this.mouseUp, false);
            imgWrap.appendChild(img);
            this.imgWrap = imgWrap;

            //关闭按钮
            var btnClose = document.createElement('a');
            btnClose.href = 'javascript:;';
            btnClose.title = '关闭';
            btnClose.innerHTML = '&times;';
            btnClose.style.cssText = 'position:absolute;width:30px;height:30px;line-height:30px;font-size:24px;text-align:center;right:-15px;top:-15px;background:rgba(0,0,0,.5);color:white;border-radius:50%;';
            btnClose.addEventListener('click', this.close, false);
            imgWrap.appendChild(btnClose);

            imgPreview.appendChild(imgWrap);

            document.body.appendChild(imgPreview);

            this.imgPreview = imgPreview;
        }
    }, {
        key: 'close',
        value: function close(e) {
            //还原网页滚动条
            document.body.style.overflow = '';

            this.imgWrap.removeEventListener('mousewheel', this.mouseWheel, false);
            this.imgWrap.removeEventListener('mousedown', this.mouseDown, false);
            this.imgWrap.removeEventListener('mousemove', this.mouseMove, false);
            this.imgWrap.removeEventListener('mouseup', this.mouseUp, false);
            e.target.removeEventListener('click', this.close, false);

            document.body.removeChild(this.imgPreview);
        }
    }, {
        key: 'mouseWheel',
        value: function mouseWheel(e) {
            e.stopPropagation();
            //每次宽度的缩放值
            var scale = step * e.wheelDelta / 120; //FF:e.delta=-+3,符号相反

            //记录当前鼠标在图片上的坐标（百分比）
            var x = e.offsetX;
            var y = e.offsetY;
            var xPercent = x / this.imgWidth;
            var yPercent = y / this.imgHeight;

            //计算新的高宽
            var width = this.imgWidth + scale; //缩放宽度
            var height = width * this.imgHeight / this.imgWidth; //高度跟着缩放

            //高或宽不能小于100，且不能都大于窗体高宽
            if (width >= 100 && height >= 100 && (width < this.winWidth || height < this.winHeight)) {
                //计算新的偏移量
                var left = this.imgLeft - (width * xPercent - x);
                var top = this.imgTop - (height * yPercent - y);

                this.imgWrap.style.left = left + 'px';
                this.imgWrap.style.top = top + 'px';
                this.imgWrap.style.width = width + 'px';
                this.imgWrap.style.height = height + 'px';
                this.imgWidth = width;
                this.imgHeight = height;
                this.imgLeft = left;
                this.imgTop = top;
            }
        }
    }, {
        key: 'mouseDown',
        value: function mouseDown(e) {
            if (e.button == 0) {
                //点击左键
                this.isMouseDown = true;
                //计算当前点与图片的位移差
                this.deltaX = e.clientX - this.imgLeft;
                this.deltaY = e.clientY - this.imgTop;
            }
        }
    }, {
        key: 'mouseMove',
        value: function mouseMove(e) {
            if (this.isMouseDown) {
                this.imgLeft = e.clientX - this.deltaX;
                this.imgTop = e.clientY - this.deltaY;
                this.imgWrap.style.left = this.imgLeft + 'px';
                this.imgWrap.style.top = this.imgTop + 'px';
            }
        }
    }, {
        key: 'mouseUp',
        value: function mouseUp() {
            this.isMouseDown = false;
        }
    }, {
        key: 'render',
        value: function render() {
            return React.createElement(
                'a',
                { href: 'javascript:;', onClick: this.open.bind(this) },
                this.props.children
            );
        }
    }]);

    return ImageViewer;
}(React.Component);

ImageViewer.propTypes = {
    src: React.PropTypes.string.isRequired
};
exports.default = ImageViewer;